<template>
  <div>
    <el-container>
      <SidebarMenu
        :default-active="activeMenu"
        @goToRoleManagement="goToRoleManagement"
        @goToMenuManagement="goToMenuManagement"
        @goToPermissionControl="goToPermissionControl"
        @goToSystemSetting="goToSystemSetting"
        @goToLogManagement="goToLogManagement"
        @goToFileManagement="goToFileManagement"
        @goToArticleManagement="goToArticleManagement"
        @goToUserInfoManagement="goToUserInfoManagement"
      />

      <el-container>
       <el-header>
          <Navbar title="菜单管理" :avatar="currentAvatar" />

        </el-header>
        <el-main>
          <!-- 查询表单 -->
          <el-card class="query-card" shadow="never">
            <el-form :inline="true" :model="queryForm">
              <el-form-item label="菜单名称">
                <el-input v-model="queryForm.menuName" placeholder="请输入菜单名称" clearable @keyup.enter="searchMenus" />
              </el-form-item>
              <el-form-item label="菜单路径">
                <el-input v-model="queryForm.menuPath" placeholder="请输入菜单路径" clearable @keyup.enter="searchMenus" />
              </el-form-item>
              <el-form-item label="父级菜单">
                <el-select v-model="queryForm.parentId" placeholder="请选择父级菜单" clearable>
                  <el-option label="无（顶级菜单）" :value="null" />
                  <el-option
                    v-for="option in parentMenuOptions"
                    :key="option.id"
                    :label="option.menuname"
                    :value="option.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="状态">
                <el-select v-model="queryForm.status" placeholder="请选择状态" clearable>
                  <el-option label="全部" value="all" />
                  <el-option label="启用" value="active" />
                  <el-option label="禁用" value="inactive" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" :loading="loading" @click="searchMenus">
                  <el-icon><Search /></el-icon>
                  查询
                </el-button>
                <el-button @click="resetQueryForm">重置</el-button>
                <el-button type="success" @click="showCreateDialog">
                  <el-icon><Plus /></el-icon>
                  新增菜单
                </el-button>
              </el-form-item>
            </el-form>
          </el-card>

          <!-- 统计信息 -->
          <el-row :gutter="20" class="statistics-row">
            <el-col :span="6">
              <el-card class="statistics-card">
                <div class="statistics-item">
                  <div class="statistics-number">{{ statistics.totalMenus }}</div>
                  <div class="statistics-label">总菜单数</div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="statistics-card">
                <div class="statistics-item">
                  <div class="statistics-number">{{ statistics.activeMenus }}</div>
                  <div class="statistics-label">启用菜单</div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="statistics-card">
                <div class="statistics-item">
                  <div class="statistics-number">{{ statistics.parentMenus }}</div>
                  <div class="statistics-label">父级菜单</div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="statistics-card">
                <div class="statistics-item">
                  <div class="statistics-number">{{ statistics.childMenus }}</div>
                  <div class="statistics-label">子级菜单</div>
                </div>
              </el-card>
            </el-col>
          </el-row>

          <!-- 菜单表格 -->
          <el-card class="menu-table-card">
            <template #header>
              <div class="card-header">
                <span>菜单列表</span>
                <div class="header-actions">
                  <el-button type="warning" size="small" :disabled="selectedRows.length === 0" @click="batchDisable">批量禁用</el-button>
                  <el-button type="danger" size="small" :disabled="selectedRows.length === 0" @click="batchDelete">批量删除</el-button>
                </div>
              </div>
            </template>

            <el-table :data="menus" style="width: 100%" v-loading="loading" @selection-change="handleSelectionChange" row-key="id">
              <el-table-column type="selection" width="55" />
              <el-table-column prop="menuname" label="菜单名称" min-width="200">
                <template #default="scope">
                  <div class="menu-name">
                    <i :class="scope.row.menuIcon" class="menu-icon"></i>
                    <span v-if="scope.row.isSystem" class="system-badge">系统</span>
                    {{ scope.row.menuname }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="menuPath" label="菜单路径" width="200" />
              <el-table-column prop="permissionKey" label="权限标识" width="200" />
              <el-table-column prop="parentName" label="父级菜单" width="150" />
              <el-table-column prop="order" label="排序" width="80" />
              <el-table-column prop="status" label="状态" width="100">
                <template #default="scope">
                  <el-tag :type="scope.row.status === 'active' ? 'success' : 'danger'">
                    {{ scope.row.status === 'active' ? '启用' : '禁用' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="createdAt" label="创建时间" width="160">
                <template #default="scope">
                  {{ formatDateTime(scope.row.createdAt) }}
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200" fixed="right">
                <template #default="scope">
                  <el-button type="text" size="small" @click="editMenu(scope.row)">编辑</el-button>
                  <el-button type="text" size="small" @click="addSubMenu(scope.row)">添加子菜单</el-button>
                  <el-button
                    type="text"
                    size="small"
                    @click="toggleStatus(scope.row)"
                    :disabled="scope.row.isSystem"
                  >
                    {{ scope.row.status === 'active' ? '禁用' : '启用' }}
                  </el-button>
                  <el-button
                    type="text"
                    size="small"
                    @click="deleteMenu(scope.row)"
                    :disabled="scope.row.isSystem"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-container">
              <el-pagination
                :current-page="pagination.currentPage"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pagination.pageSize"
                :total="pagination.total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </el-card>
        </el-main>
      </el-container>
    </el-container>

    <!-- 新增/编辑菜单对话框 -->
    <el-dialog v-model="menuDialogVisible" :title="dialogTitle" width="600px">
      <el-form :model="menuForm" :rules="menuRules" ref="menuFormRef" label-width="100px">
        <el-form-item label="菜单名称" prop="menuname">
          <el-input v-model="menuForm.menuname" placeholder="请输入菜单名称" maxlength="50" show-word-limit />
        </el-form-item>
        <el-form-item label="菜单路径" prop="menuPath">
          <el-input v-model="menuForm.menuPath" placeholder="请输入菜单路径" maxlength="200" show-word-limit />
        </el-form-item>
        <el-form-item label="权限标识" prop="permissionKey">
          <el-input v-model="menuForm.permissionKey" placeholder="请输入权限标识" maxlength="100" show-word-limit />
        </el-form-item>
        <el-form-item label="父级菜单">
          <el-select v-model="menuForm.parentId" placeholder="请选择父级菜单" clearable>
            <el-option label="无（顶级菜单）" :value="null" />
            <el-option
              v-for="menu in parentMenus"
              :key="menu.id"
              :label="menu.menuname"
              :value="menu.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="菜单图标">
          <el-input v-model="menuForm.menuIcon" placeholder="请输入图标类名" maxlength="100" show-word-limit />
        </el-form-item>
        <el-form-item label="排序权重">
          <el-input-number v-model="menuForm.order" :min="0" :max="9999" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="menuDialogVisible = false">取消</el-button>
          <el-button type="primary" :loading="saving" @click="saveMenu">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Search, Plus } from '@element-plus/icons-vue';
import SidebarMenu from './SidebarMenu.vue';
import Navbar from './CommonNavbar.vue';
import api from '../utils/request.js';

const router = useRouter();
const activeMenu = ref('2-2'); // 菜单管理菜单项
const loading = ref(false);
const saving = ref(false);
const menuDialogVisible = ref(false);
const selectedRows = ref([]);
const menuFormRef = ref();

// 查询表单
const queryForm = ref({
  menuName: '',
  menuPath: '',
  parentId: null,
  status: 'all'
});

// 分页
const pagination = ref({
  currentPage: 1,
  pageSize: 20,
  total: 0
});

// 统计信息
const statistics = ref({
  totalMenus: 0,
  activeMenus: 0,
  parentMenus: 0,
  childMenus: 0
});

// 菜单表单
const menuForm = ref({
  menuname: '',
  menuPath: '',
  menuIcon: '',
  parentId: null,
  order: 0,
  permissionKey: ''
});

// 表单验证规则
const menuRules = {
  menuname: [
    { required: true, message: '请输入菜单名称', trigger: 'blur' },
    { min: 2, max: 50, message: '菜单名称长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  menuPath: [
    { required: true, message: '请输入菜单路径', trigger: 'blur' }
  ]
};

// 菜单数据
const menus = ref([]);

// 父级菜单选项（用于查询和表单）
const parentMenuOptions = ref([]);

// 查询缓存
const queryCache = ref(new Map());

// 计算属性
const dialogTitle = computed(() => {
  return menuForm.value.id ? '编辑菜单' : '新增菜单';
});

const parentMenus = computed(() => {
  return menus.value.filter(menu => !menu.parentId);
});

// 获取菜单列表
const fetchMenus = async (useCache = false) => {
  try {
    loading.value = true;
    
    // 构建查询参数
    const params = {
      pageIndex: pagination.value.currentPage,
      pageSize: pagination.value.pageSize
    };
    
    // 添加查询条件
    if (queryForm.value.menuName?.trim()) {
      params.Menuname = queryForm.value.menuName.trim();
    }
    
    if (queryForm.value.menuPath?.trim()) {
      params.MenuPath = queryForm.value.menuPath.trim();
    }
    
    if (queryForm.value.parentId) {
      params.ParentId = queryForm.value.parentId;
    }
    
    // 生成缓存键
    const cacheKey = JSON.stringify(params);
    
    // 检查缓存
    if (useCache && queryCache.value.has(cacheKey)) {
      const cachedData = queryCache.value.get(cacheKey);
      menus.value = cachedData.menus;
      pagination.value.total = cachedData.total;
      updateStatistics();
      return;
    }
    
    console.log('发送请求参数:', params);
    const response = await api.get('/api/menu', { params });
    console.log('API响应:', response);
    
    if (response.data.success) {
      const data = response.data.data;
      console.log('菜单数据:', data);
      
      // 将菜单树转换为扁平列表
      const flattenMenus = flattenMenuTree(data.menuTree);
      console.log('扁平化菜单:', flattenMenus);
      
      // 添加父菜单名称和其他信息
      const menuMap = new Map();
      flattenMenus.forEach(menu => {
        menuMap.set(menu.id, menu);
      });
      
      flattenMenus.forEach(menu => {
        if (menu.parentId) {
          const parentMenu = menuMap.get(menu.parentId);
          menu.parentName = parentMenu ? parentMenu.menuname : '';
        } else {
          menu.parentName = '';
        }
        // 添加状态和系统标识（后端没有这些字段，暂时默认为启用和非系统）
        menu.status = 'active';
        menu.isSystem = false;
      });
      
      menus.value = flattenMenus;
      pagination.value.total = data.totalCount || 0;
      updateStatistics();
      
      // 缓存结果
      queryCache.value.set(cacheKey, {
        menus: flattenMenus,
        total: data.totalCount || 0,
        timestamp: Date.now()
      });
      
      // 清理过期缓存（超过5分钟）
      const now = Date.now();
      for (const [key, value] of queryCache.value.entries()) {
        if (now - value.timestamp > 5 * 60 * 1000) {
          queryCache.value.delete(key);
        }
      }
      
      ElMessage.success('获取菜单列表成功');
    } else {
      console.error('API返回错误:', response.data);
      ElMessage.error(response.data.message || '获取菜单列表失败');
    }
  } catch (error) {
    console.error('获取菜单列表失败:', error);
    console.error('错误详情:', {
      message: error.message,
      response: error.response?.data,
      status: error.response?.status,
      config: error.config
    });
    
    if (error.response?.status === 401) {
      ElMessage.error('认证失败，请重新登录');
    } else if (error.response?.status === 403) {
      ElMessage.error('权限不足，无法访问菜单数据');
    } else if (error.response?.status === 404) {
      ElMessage.error('菜单API接口不存在');
    } else if (error.response?.status >= 500) {
      ElMessage.error('服务器错误，请稍后重试');
    } else {
      ElMessage.error(`获取菜单列表失败: ${error.message}`);
    }
  } finally {
    loading.value = false;
  }
};

// 获取父级菜单选项
const fetchParentMenuOptions = async () => {
  try {
    const response = await api.get('/api/menu/tree');
    if (response.data.success) {
      const menuTree = response.data.data;
      const flattenMenus = flattenMenuTree(menuTree);
      parentMenuOptions.value = flattenMenus.map(menu => ({
        id: menu.id,
        menuname: menu.menuname,
        level: getMenuLevel(menu, flattenMenus)
      }));
    }
  } catch (error) {
    console.error('获取父级菜单选项失败:', error);
  }
};

// 获取菜单层级
const getMenuLevel = (menu, allMenus) => {
  let level = 0;
  let currentMenu = menu;
  
  while (currentMenu.parentId) {
    level++;
    currentMenu = allMenus.find(m => (m.id || m.Id) === currentMenu.parentId);
    if (!currentMenu) break;
  }
  
  return level;
};

// 将菜单树转换为扁平列表
const flattenMenuTree = (menuTree) => {
  const result = [];
  const flatten = (menus) => {
    menus.forEach(menu => {
      result.push({
        id: menu.Id || menu.id,
        menuname: menu.Menuname || menu.menuname,
        menuPath: menu.MenuPath || menu.menuPath,
        menuIcon: menu.MenuIcon || menu.menuIcon,
        parentId: menu.ParentId || menu.parentId,
        order: menu.Order || menu.order,
        permissionKey: menu.PermissionKey || menu.permissionKey,
        createdAt: menu.CreatedAt || menu.createdAt || new Date().toISOString(),
        updatedAt: menu.UpdatedAt || menu.updatedAt || new Date().toISOString()
      });
      if (menu.Children && menu.Children.length > 0) {
        flatten(menu.Children);
      } else if (menu.children && menu.children.length > 0) {
        flatten(menu.children);
      }
    });
  };
  flatten(menuTree);
  return result;
};

// 更新统计信息
const updateStatistics = () => {
  const totalMenus = menus.value.length;
  const activeMenus = menus.value.filter(menu => menu.status === 'active').length;
  const parentMenus = menus.value.filter(menu => !menu.parentId).length;
  const childMenus = menus.value.filter(menu => menu.parentId).length;
  
  statistics.value = {
    totalMenus,
    activeMenus,
    parentMenus,
    childMenus
  };
};

// 导航方法
const goToRoleManagement = () => {
  router.push('/RoleManagement');
};

const goToMenuManagement = () => {
  router.push('/MenuManagement');
};

const goToPermissionControl = () => {
  router.push('/PermissionControl');
};

const goToSystemSetting = () => {
  router.push('/system');
};

const goToLogManagement = () => {
  router.push('/LogManagement');
};

const goToFileManagement = () => {
  router.push('/FileManagement');
};

const goToArticleManagement = () => {
  router.push('/ArticleManagement');
};

const goToUserInfoManagement = () => {
  router.push('/UserInfoManagement');
};

// 查询方法
const searchMenus = () => {
  pagination.value.currentPage = 1;
  fetchMenus(false); // 不使用缓存，强制刷新
};

const resetQueryForm = () => {
  queryForm.value = {
    menuName: '',
    menuPath: '',
    parentId: null,
    status: 'all'
  };
  pagination.value.currentPage = 1;
  fetchMenus(false);
};

// 显示新增对话框
const showCreateDialog = () => {
  menuForm.value = {
    menuname: '',
    menuPath: '',
    menuIcon: '',
    parentId: null,
    order: 0,
    permissionKey: ''
  };
  menuDialogVisible.value = true;
};

// 编辑菜单
const editMenu = (menu) => {
  menuForm.value = { ...menu };
  menuDialogVisible.value = true;
};

// 添加子菜单
const addSubMenu = (parentMenu) => {
  menuForm.value = {
    menuname: '',
    menuPath: '',
    menuIcon: '',
    parentId: parentMenu.id,
    order: 0,
    permissionKey: ''
  };
  menuDialogVisible.value = true;
};

// 保存菜单
const saveMenu = async () => {
  try {
    await menuFormRef.value.validate();
    saving.value = true;

    if (menuForm.value.id) {
      // 更新菜单
      const response = await api.put('/api/menu', {
        id: menuForm.value.id,
        menuname: menuForm.value.menuname,
        menuPath: menuForm.value.menuPath,
        menuIcon: menuForm.value.menuIcon,
        parentId: menuForm.value.parentId,
        order: menuForm.value.order,
        permissionKey: menuForm.value.permissionKey
      });
      
      if (response.data.success) {
        ElMessage.success('菜单更新成功');
        menuDialogVisible.value = false;
        // 清除缓存并重新获取数据
        queryCache.value.clear();
        await fetchMenus(false);
        await fetchParentMenuOptions();
      } else {
        ElMessage.error(response.data.message || '更新失败');
      }
    } else {
      // 新增菜单
      const response = await api.post('/api/menu', {
        menuname: menuForm.value.menuname,
        menuPath: menuForm.value.menuPath,
        menuIcon: menuForm.value.menuIcon,
        parentId: menuForm.value.parentId,
        order: menuForm.value.order,
        permissionKey: menuForm.value.permissionKey
      });
      
      if (response.data.success) {
        ElMessage.success('菜单创建成功');
        menuDialogVisible.value = false;
        // 清除缓存并重新获取数据
        queryCache.value.clear();
        await fetchMenus(false);
        await fetchParentMenuOptions();
      } else {
        ElMessage.error(response.data.message || '创建失败');
      }
    }
  } catch (error) {
    console.error('保存菜单失败:', error);
    ElMessage.error('保存失败，请重试');
  } finally {
    saving.value = false;
  }
};

// 切换状态
const toggleStatus = (menu) => {
  const action = menu.status === 'active' ? '禁用' : '启用';
  ElMessageBox.confirm(`确定要${action}菜单"${menu.menuname}"吗？`, `${action}确认`, {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    menu.status = menu.status === 'active' ? 'inactive' : 'active';
    updateStatistics();
    ElMessage.success(`${action}成功`);
  }).catch(() => {
    ElMessage.info('已取消操作');
  });
};

// 删除菜单
const deleteMenu = (menu) => {
  ElMessageBox.confirm(`确定要删除菜单"${menu.menuname}"吗？此操作不可恢复！`, '删除确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'error'
  }).then(async () => {
    try {
      const response = await api.delete(`/api/menu/${menu.id}`);
      if (response.data.success) {
        ElMessage.success('删除成功');
        // 清除缓存并重新获取数据
        queryCache.value.clear();
        setTimeout(async () => {
          await fetchMenus(false);
          await fetchParentMenuOptions();
        }, 500);
      } else {
        ElMessage.error(response.data.message || '删除失败');
      }
    } catch (error) {
      console.error('删除菜单失败:', error);
      ElMessage.error('删除失败，请重试');
    }
  }).catch(() => {
    ElMessage.info('已取消删除');
  });
};

// 批量操作
const handleSelectionChange = (rows) => {
  selectedRows.value = rows;
};

const batchDisable = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要禁用的菜单');
    return;
  }
  ElMessageBox.confirm(`确定要禁用选中的${selectedRows.value.length}个菜单吗？`, '批量禁用确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    selectedRows.value.forEach(menu => {
      if (!menu.isSystem) {
        menu.status = 'inactive';
      }
    });
    updateStatistics();
    ElMessage.success('批量禁用成功');
  });
};

const batchDelete = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要删除的菜单');
    return;
  }
  ElMessageBox.confirm(`确定要删除选中的${selectedRows.value.length}个菜单吗？此操作不可恢复！`, '批量删除确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'error'
  }).then(async () => {
    try {
      const deletePromises = selectedRows.value
        .filter(menu => !menu.isSystem)
        .map(menu => api.delete(`/api/menu/${menu.id}`));
      
      const results = await Promise.allSettled(deletePromises);
      const successCount = results.filter(result => result.status === 'fulfilled' && result.value.data.success).length;
      const failCount = results.length - successCount;
      
      if (successCount > 0) {
        ElMessage.success(`成功删除${successCount}个菜单`);
      }
      if (failCount > 0) {
        ElMessage.warning(`${failCount}个菜单删除失败`);
      }
      
      // 清除缓存并重新获取数据
      queryCache.value.clear();
      setTimeout(async () => {
        await fetchMenus(false);
        await fetchParentMenuOptions();
      }, 500);
    } catch (error) {
      console.error('批量删除失败:', error);
      ElMessage.error('批量删除失败，请重试');
    }
  });
};

// 分页处理
const handleSizeChange = (size) => {
  pagination.value.pageSize = size;
  pagination.value.currentPage = 1;
  fetchMenus(true); // 使用缓存
};

const handleCurrentChange = (page) => {
  pagination.value.currentPage = page;
  fetchMenus(true); // 使用缓存
};

// 格式化方法
const formatDateTime = (dateTime) => {
  if (!dateTime) return '';
  return new Date(dateTime).toLocaleString('zh-CN');
};

// 组件挂载时加载数据
onMounted(async () => {
  await Promise.all([
    fetchMenus(false),
    fetchParentMenuOptions()
  ]);
});
</script>

<style scoped>
.query-card {
  margin-bottom: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(80, 120, 200, 0.08);
}

.statistics-row {
  margin-bottom: 20px;
}

.statistics-card {
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(80, 120, 200, 0.08);
  transition: transform 0.2s, box-shadow 0.2s;
}

.statistics-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(80, 120, 200, 0.12);
}

.statistics-item {
  text-align: center;
  padding: 20px 0;
}

.statistics-number {
  font-size: 28px;
  font-weight: bold;
  color: #4f46e5;
  margin-bottom: 8px;
}

.statistics-label {
  font-size: 14px;
  color: #666;
}

.menu-table-card {
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(80, 120, 200, 0.08);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header span {
  font-size: 18px;
  font-weight: bold;
  color: #4f46e5;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.menu-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.menu-icon {
  font-size: 16px;
  color: #666;
}

.system-badge {
  background: #ff6b6b;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.el-table {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(80, 120, 200, 0.08);
  background: #fff;
}

.el-table th {
  background: #e0e7ff !important;
  color: #4f46e5;
  font-weight: 600;
  font-size: 15px;
}

.el-table tr {
  transition: background 0.2s;
}

.el-table tr:hover > td {
  background: #f1f5ff !important;
}

.el-table .el-button[type="text"] {
  color: #6366f1;
  font-weight: 500;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
}

.el-table .el-button[type="text"]:hover {
  background: #e0e7ff;
  color: #3b3b3b;
}

.el-table .el-button[type="text"]:disabled {
  color: #c0c4cc;
  cursor: not-allowed;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding: 20px 0;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.el-form-item {
  margin-bottom: 16px;
}

.el-button {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s;
}

.el-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.el-card {
  border: none;
  transition: all 0.3s;
}

.el-card:hover {
  box-shadow: 0 4px 20px rgba(80, 120, 200, 0.12);
}

.el-tag {
  border-radius: 6px;
  font-weight: 500;
}

.el-select {
  width: 180px;
}

.el-input {
  width: 180px;
}

.el-input[type="textarea"] {
  width: 100%;
}
</style>
